<template>
	<view class="container">
		<view class="dingType">
			<view class="ding1">
				<view class="login">
					<image src="/static/logo.png"/>
				</view>
				<view class="xian">
					鲜品直达
				</view>
				
				<!-- 搜索框容器（包含输入框+内部搜索按钮） -->
				<view class="sou-container">
					<view class="sou">
						<input type="text" placeholder="搜索鲜果" v-model="searchValue" />
					</view>
					<!-- 搜索按钮（嵌入搜索框内部右侧） -->
					<view class="search-btn" @click="handleSearch">
						<image src="/static/底部/搜索.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 新增：顶部4分类栏 -->
		<view class="category-bar">
			<view 
				class="category-item" 
				v-for="(category, index) in categories" 
				:key="index"
				:class="{ active: activeCategory === index }"
				@click="switchCategory(index)">
				<text class="category-text">{{ category.name }}</text>
				<view class="category-underline" :class="{ active: activeCategory === index }"></view>
			</view>
		</view>

		<!-- 分类对应的商品列表（class替换：productType → product-container） -->
		<view class="product-container">
			<!-- 商品卡片（class替换：product-item1 → product-card） -->
			<view class="product-card" v-for="(item, index) in filteredProducts" :key="item.id">
				<!-- 商品图片（父级前缀更新为 product-card） -->
				<image class="product-card__img" :src="item.imgUrl" mode="widthFix"></image>
				<!-- 商品信息区域（父级前缀更新为 product-card） -->
				<view class="product-card__info">
					<!-- 名称+距离 并排容器（父级前缀更新为 product-card） -->
					<view class="product-card__header">
						<text class="product-card__name">{{ item.name }}</text>
						
					</view>
					<text class="product-card__tag">原价:{{ item.tag }}</text>
					<view class="product-card__bottom">
						<text class="product-card__price">¥{{ item.price }}</text>
						<view class="product-card__cart-btn">
							<image src="/static/购物车满.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				searchValue: '',
				// 新增：4个分类
				categories: [
					{ name: '全部',type:'all'},
					{ name: '水果', type: 'fruit' },
					{ name: '蔬菜', type: 'vegetable' },
					{ name: '干果', type: 'dryFruit' },
					{ name: '加工类', type: 'processed' }
				],
				activeCategory: 0, // 默认选中第1个分类（水果）
				// 商品数据添加分类标识
				productList: [
					{ id: 1, name: '进口红富士苹果', distance: '80m', price: 58, tag: '3.00元', imgUrl:'/static/板栗.png', type: 'fruit' },
					{ id: 2, name: '阳光玫瑰葡萄', distance: '10m', price: 88, tag: '4.00元', imgUrl:'/static/板栗.png', type: 'fruit' },
					{ id: 7, name: '有机生菜', distance: '120m', price: 15, tag: '2.00元', imgUrl:'/static/蔬菜.png', type: 'vegetable' },
					{ id: 8, name: '东北黑木耳', distance: '250m', price: 38, tag: '5.00元', imgUrl:'/static/干果.png', type: 'dryFruit' },
					{ id: 9, name: '鲜榨橙汁', distance: '300m', price: 22, tag: '3.50元', imgUrl:'/static/加工品.png', type: 'processed' },
					{ id: 10, name: '进口红富士苹果', distance: '80m', price: 58, tag: '3.00元', imgUrl:'/static/板栗.png', type: 'all' },
					{ id: 11, name: '进口红富士苹果', distance: '80m', price: 58, tag: '3.00元', imgUrl:'/static/板栗.png', type: 'all' },
				]
			};
		},
		computed: {
			// 按选中分类筛选商品
			filteredProducts() {
				const activeType = this.categories[this.activeCategory].type;
				return this.productList.filter(item => item.type === activeType);
			}
		},
		methods: {
			handleSearch() { 
				console.log('搜索内容：', this.searchValue || '搜索鲜果');
				if (!this.searchValue) {
					uni.showToast({ title: '请输入搜索内容', icon: 'none' });
				} else {
					// 实际项目中可添加接口请求或页面跳转逻辑
				}
			},
			// 切换分类
			switchCategory(index) {
				this.activeCategory = index;
			}
		}
	};
</script>

<style lang="css">
	/* 外层容器样式 */
	.container {
	  padding-bottom: 120rpx;
	  min-height: 100vh;
	  box-sizing: border-box;
	}

	/* 顶部区域样式 */
	.dingType {
	  background-color: #66cc00;
	  width: 100%;
	  height: auto;
	  border-radius: 0 0 100rpx 100rpx;
	  padding-bottom: 40rpx;
	}
	.dingType .ding1 {
	  height: 100rpx;
	  display: flex;
	  align-items: center;
	  padding: 0 20rpx;
	  padding-top: 10rpx;
	}
	.dingType .ding1 view {
	  margin: 0 5rpx;
	}
	.dingType .ding1 .login image {
	  width: 70rpx;
	  height: 70rpx;
	  border-radius: 50%;
	}
	.dingType .ding1 .xian {
	  color: white;
	  font-family: "黑体";
	  font-weight: 900;
	  font-size: 30rpx;
	  -webkit-text-stroke: 1rpx white;
	  margin-right: 100rpx;
	}

	/* 搜索框容器 */
	.sou-container {
		position: relative; /* 作为按钮定位的参考 */
		width: 350rpx; /* 保持原搜索框宽度不变 */
	}
	.dingType .ding1 .sou {
	  width: 100%; /* 占满容器宽度 */
	  background-color: white;
	  border-radius: 30rpx; /* 保持原圆角 */
	  padding: 0 20rpx;
	  margin-right: 0; /* 取消右边距，因为按钮在内部 */
	}
	.dingType .ding1 .sou input {
	  width: 100%;
	  height: 60rpx;
	  font-size: 20rpx;
	  color: #333;
	  background: transparent;
	  border: none;
	  outline: none;
	  padding-right: 60rpx; /* 给右侧按钮留空间，避免文字被遮挡 */
	}
	.dingType .ding1 .sou input::placeholder {
	  color: #999;
	  font-size: 26rpx;
	}

	/* 搜索按钮（嵌入搜索框内部右侧） */
	.search-btn {
		position: absolute; /* 绝对定位到容器右侧 */
		right: 0rpx; /* 距离右侧10rpx */
		top: 50%;
		transform: translateY(-50%); /* 垂直居中 */
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.search-btn image {
		width: 28rpx;
		height: 28rpx;
	}
	
	/* 商品模块样式（class替换：productType → product-container） */
	.product-container {
	  background-color: #f2f2f2;
	  width: 100%;
	  box-sizing: border-box;
	  display: grid;
	  grid-template-columns: repeat(2, 45%);
	  justify-content: center;
	  gap: 20rpx;
	  padding: 20rpx 0;
	}
	
	/* 商品卡片样式（class替换：product-item1 → product-card） */
	.product-card {
	  background-color: #fff;
	  border-radius: 20rpx;
	  overflow: hidden;
	  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	  height: auto;
	}
	
	/* 商品图片（class替换：product-img → product-card__img） */
	.product-card__img {
	  width: 100%;
	  height: 280rpx;
	  object-fit: cover; /* 关键：保持图片比例，裁剪填充容器 */
	}
	
	/* 商品信息区域（class替换：product-info → product-card__info） */
	.product-card__info {
		padding: 15rpx 20rpx;
	}
	
	/* 名称+距离 并排容器（class替换：product-header → product-card__header） */
	.product-card__header {
		display: flex;
		justify-content: space-between; /* 左右对齐 */
		align-items: center; /* 垂直居中 */
		margin-bottom: 8rpx; /* 与下方标签保持间距 */
	}
	
	/* 商品名称（class替换：product-name → product-card__name） */
	.product-card__name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		max-width: 200rpx;
		white-space: nowrap; /* 不换行 */
		overflow: hidden; /* 超出隐藏 */
		text-overflow: ellipsis; /* 超出显示省略号 */
	}
	
	/* 距离样式（class替换：product-distance → product-card__distance） */
	.product-card__distance {
		font-size: 24rpx;
		color: #66cc00; /* 主题绿色，突出显示 */
		font-weight: 500;
	}
	
	/* 商品原价标签（class替换：product-tag → product-card__tag） */
	.product-card__tag {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin: 8rpx 0;
		text-decoration: line-through;
	}
	
	/* 商品底部（价格+购物车）（class替换：product-bottom → product-card__bottom） */
	.product-card__bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}
	
	/* 商品价格（class替换：product-price → product-card__price） */
	.product-card__price {
		font-size: 30rpx;
		color: #ff3333;
		font-weight: 700;
	}
	
	/* 购物车按钮（class替换：cart-btn → product-card__cart-btn） */
	.product-card__cart-btn {
		width: 50rpx;
		height: 50rpx;
		background-color:#66cc00;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.product-card__cart-btn image {
		width: 30rpx;
		height: 30rpx;
	}
	
	/* 分类栏样式（保持不变） */
	.category-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		position: sticky;
		top: 0;
		z-index: 99; /* 固定在顶部，防止被商品遮挡 */
	}
	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.category-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #666;
		transition: color 0.3s;
	}
	.category-underline {
		width: 40rpx;
		height: 4rpx;
		background-color: transparent;
		margin-top: 8rpx;
		transition: all 0.3s;
	}
	/* 选中分类样式 */
	.category-item.active .category-text {
		color: #66cc00;
		font-weight: 700;
	}
	.category-item.active .category-underline {
		background-color: #66cc00;
		width: 50rpx; /* 选中时下划线更长 */
	}
</style>